<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- 简写：header>(div.box>ul>li{这是li$$}*5)+ul>li{lili$$}*5 -->
    <header>
        <div class="box">
            <ul>
                <li class="li01">这是li01</li>
                <li>这是li02</li>
                <li>这是li03</li>
                <li>这是li04</li>
                <li class="li05">这是li05</li>
            </ul>
        </div> 
        <ul>
            <li class="li666">lili01</li>
            <li>lili02</li>
            <li>lili03</li>
            <li>lili04</li>
            <li class="li888">lili05</li>
        </ul>
    </header>
    <script>
        // jQuery 是一个 JavaScript 库。
        console.log(jQuery); //函数对象 //ƒ (a,b){return new r.fn.init(a,b)}
        console.log($); //函数对象     // ƒ (a,b){return new r.fn.init(a,b)}
        // $ === jQuery 

        var num = 10;
        console.log(typeof num.toFixed(), num.toFixed()); // string 10

        // jquery获取的标签不可以直接使用js中dom的属性和方法
        // js中dom获取的标签也不可以使用jquery中的属性和方法
        // 获取的标签叫jquery对象 
        // $("选择器") 会查找到所有符合选择器的标签 一个或多个
        console.log($('header'));    //r.fn.init [header, prevObject: r.fn.init(1)]
        console.log($('header, .box')); //r.fn.init(2) [header, div.box, prevObject: r.fn.init(1)]
        console.log($(".box li"));   //r.fn.init(5) [li.li01, li, li, li, li, prevObject: r.fn.init(1)]
        console.log($(".box li:first")); //找到第一个li //r.fn.init [li.li01, prevObject: r.fn.init(1)]
        console.log($(".box li").first()); //等价于 $(".box li:first")
        
        //找到第eq(n) 中索引值n为n的li标签
        console.log($(".box li:last"));//r.fn.init [li.li05, prevObject: r.fn.init(1)]
        console.log($(".box li").last());  //等价于 $(".box li:last")
        
        //获取小于参数索引值的标签 找的是0 1
        console.log($(".box li:lt(2)")); //r.fn.init(2) [li.li01, li, prevObject: r.fn.init(1)]
        // console.log($(".box li").lt(2)); 报错

         //获取大于参数索引值的标签 找的是3 4
         console.log($(".box li:gt(2)")); //r.fn.init(2) [li, li.li05, prevObject: r.fn.init(1)]
        // console.log($(".box li").gt(2));  报错

        //找到第eq(n) 中索引值n为n的li标签
        console.log($(".box li:eq(2)")); //r.fn.init [li, prevObject: r.fn.init(1)]
        // .eq(index) 获取第index个li标签 获取的还是jquery对象
        console.log($(".box li").eq(0)); //r.fn.init [li.li01, prevObject: r.fn.init(5)]
        
        var lis = document.querySelectorAll("li");
        console.log(lis);
        console.log(lis[0]);
        // lis[0].innerHTML = "内容";

        // 可以将jquery对象转换成dom对象
        // console.log($("header")[0]);
        // console.log($("header").get(0)); 
        // $("header")[0].innerHTML = "内容"

        // $(dom对象) 将dom对象转换成jquery对象
        console.log($(lis[0]));
    </script>
</body>
</html>